import store from "../redux/store"
import '../assets/css/dialog.css'
import { createRef } from "react"

function Dialog() {
    return (
        <div>
            {
                store.getState().MsgMode.chatObj.map((item, index) => {
                    if (item.flag == true) {
                        return (
                            <MyView avatar={store.getState().MsgMode.avatar[0]} msg={item.msg}></MyView>
                        )
                    } else {
                        return (
                            <HisView avatar={store.getState().MsgMode.avatar[store.getState().MsgMode.avatar.length - 1]} msg={item.msg}></HisView>
                        )
                    }
                })
            }
        </div>
    )
}

function MyView(props) {
    const dialogBox = createRef()
    return (
        <div>
            <div className="myDialogBox" ref={dialogBox}>
                <img className="myDialogAvatar" src={props.avatar} alt="" width='10%' />
                <div className="myDialogMsg">{props.msg}</div>
            </div>
        </div>
    )
}

function HisView(props) {
    return (
        <div>
            <div className="dialogBox">
                <img className="dialogAvatar" src={props.avatar} alt="" width='10%' />
                <div className="dialogMsg">{props.msg}</div>
            </div>
        </div>
    )
}

export default Dialog